<template>
  <div>
    <div class="pagetop" style="margin-top: 0">
      <div class="flex flex-center topbar block index-search">
        <div class="flex-full inputbox flex flex-center block" @click="onSearchTap">
          <img class="icon" src="@/assets/img/ic_search.png">
          <span>输入您想搜索的内容</span>
        </div>
      </div>
    </div>
    <div class="tabbar">
      <div class="tabbar-item">
        <chimage class="icon" :src="require('@/assets/img/tab_icon_home_active.png')"></chimage>
        <span class="label">首页</span>
      </div>
      <!--      <div class="tabbar-item" @click="onClassTap">
              <chimage class="icon" :src="require('@/assets/img/tab_icon_class.png')"></chimage>
              <span class="label">分类</span>
            </div>-->
      <div class="tabbar-item" @click="onCartTap">
        <span class="goodsNum" v-if="goodsNum">{{goodsNum}}</span>
        <chimage class="icon" :src="require('@/assets/img/tab_icon_cart.png')"></chimage>
        <span class="label">购物车</span>
      </div>
      <div class="tabbar-item" @click="onMeTap">
        <chimage class="icon" :src="require('@/assets/img/tab_icon_me.png')"></chimage>
        <span class="label">我的</span>
      </div>
    </div>
    <div class="page">

      <!--banner-->
      <div v-if="bannerList.length" class="swiper-block index-back index-pad-bto">
        <swiper class="block swiper-container-banner" :options="swiperOptionBanner" style="padding: 0 12px">
          <swiper-slide v-for="(item) in bannerList" :key="item.adv_type">
            <img :src="item.adv_image" @click="onBannerClick(item)">
          </swiper-slide>
        </swiper>
        <div class="swiper-pagination" id="swiper-pagination-banner"></div>
      </div>

      <!--分类-->
      <div class="block swiper-block swiper-block-class index-back">
        <swiper class="swiper-container swiper-container-class" style=" margin-top: 0; padding: 0" v-if="categoryList.length" :options="swiperOptionClass">
          <swiper-slide class="grid-1-4 swiper-slide swiper-block-class-item" v-for="(category, index) in categoryList" :key="index">
            <ul class="swiper-block-class-item-con">
              <li class="swiper-block-class-item-con-list"
                  v-for="(category_sec, index_sec) in category"
                  :key="index_sec"
                  @click="onClickCategory(category_sec)"
              >
                <img class="swiper-block-class-item-con-list-img" :src="category_sec.category_image">
                <div class="swiper-block-class-item-con-list-text">{{category_sec.category_name}}</div>
              </li>
            </ul>
          </swiper-slide>
        </swiper>
        <div class="swiper-pagination" id="swiper-pagination-class"></div>
      </div>

      <!--秒杀  折扣 -->
      <div class="activity block index-back" v-if="seckillList.length || discountList.length">
        <div class="activity-content"
             v-if="seckillList.length"
             @click="onSeckillTap"
             :style="{width: activeWidthSeckillAndDiscount.seckill}">
          <div class="activity-content-head">
            <span class="activity-content-head-title">限时秒杀</span>
            <div class="activity-content-head-desc">
              <span>{{seckillListStatus.seckill_status == 1 ? '当前场次' : '即将开始'}}</span>
              <span class="activity-content-head-desc-time">
                 <clocker
                   :time="seckillListStatus.seckill_status == 1 ? seckillListStatus.seckill_endtime : seckillListStatus.seckill_starttime"
                   format="'%H : %M : %S'" @on-finish="getSeckillTime">
                    <span class="activity-content-head-desc-tim-num">%H</span>
                    <span class="activity-content-head-desc-tim-bo">:</span>
                    <span class="activity-content-head-desc-tim-num">%M</span>
                    <span class="activity-content-head-desc-tim-bo">:</span>
                    <span class="activity-content-head-desc-tim-num">%S</span>
                 </clocker>
              </span>
            </div>
          </div>
          <ul class="activity-content-box activity-content-mini" :class="[activeWidthSeckillAndDiscount.border]">
            <li class="activity-content-box-item"
                :style="{width: activeWidthSeckillAndDiscount.seckillItem, marginRight: activeWidthSeckillAndDiscount.marginRight}"
                v-for="(item, index) in activeWidthSeckillAndDiscount.seckillList"
                :key="index">
              <img class="activity-content-box-item-img" :src="item.goods_info.goods_image_main">
              <div class="activity-content-box-item-price index-ellipsis">￥{{item.seckill_price}}</div>
              <div class="activity-content-box-item-old index-ellipsis">￥{{item.goods_info.reference_price}}</div>
            </li>
          </ul>
        </div>

        <div class="activity-content"
             :style="{width: activeWidthSeckillAndDiscount.discount}"
             @click="onDiscountTap"
             v-if="discountList.length">
          <div class="activity-content-head">
            <span class="activity-content-head-title">折扣活动</span>
          </div>
          <ul class="activity-content-box activity-content-mini">
            <li class="activity-content-box-item"
                :style="{width: activeWidthSeckillAndDiscount.discountItem, marginRight: activeWidthSeckillAndDiscount.marginRight}"
                v-for="(item, index) in activeWidthSeckillAndDiscount.discountList"
                :key="index">
              <img class="activity-content-box-item-img" :src="item.goods_info.goods_image_main">
              <div class="activity-content-box-item-price index-ellipsis">￥{{item.discount_price}}</div>
              <div class="activity-content-box-item-old index-ellipsis">￥{{item.goods_info.reference_price}}</div>
            </li>
          </ul>
        </div>
      </div>

      <!--拼团  优惠券 -->
      <div class="activity block index-back"
           v-if="groupList.length || couponList.length">
        <div class="activity-content"
             v-if="activeWidthGroupAndCoupon.groupList.length"
             @click="onGroupTap"
             :style="{width: activeWidthGroupAndCoupon.group}">
          <div class="activity-content-head">
            <span class="activity-content-head-title">拼团活动</span>
          </div>
          <ul class="activity-content-box activity-content-mini" :class="[activeWidthGroupAndCoupon.border]">
            <li class="activity-content-box-item"
                v-for="(item, index) in activeWidthGroupAndCoupon.groupList"
                :style="{width: activeWidthGroupAndCoupon.groupItem, marginRight: activeWidthGroupAndCoupon.marginRight}"
                :key="index">
              <img class="activity-content-box-item-img" :src="item.goods_info.goods_image_main">
              <div class="activity-content-box-item-price index-ellipsis">￥{{item.groupbuy_price}}</div>
              <div class="activity-content-box-item-old index-ellipsis">￥{{item.goods_info.reference_price}}</div>
            </li>
          </ul>
        </div>

        <div class="activity-content activity-content-big"
             :style="{width: activeWidthGroupAndCoupon.coupon}"
             @click="onGetCouponTap"
             v-if="couponList.length">
          <div class="activity-content-head">
            <span class="activity-content-head-title">优惠券</span>
          </div>
          <ul class="activity-content-box activity-content-big">
            <li class="activity-content-box-item"
                v-for="(item, index) in activeWidthGroupAndCoupon.couponList"
                :style="{width: activeWidthGroupAndCoupon.couponItem,marginRight:activeWidthGroupAndCoupon.couponMarginRight}"
                :key="index">
              <div class="activity-content-box-item-ti index-ellipsis">{{item.coupon_title}}</div>
              <div class="activity-content-box-item-num index-ellipsis">{{item.reduce_amount}}</div>
              <div class="activity-content-box-item-desc index-ellipsis"
                   v-if="item.coupon_type === CouponType.TFullReduction.value">
                满{{item.full_amount}}减{{item.reduce_amount}}
              </div>
              <div class="activity-content-box-item-desc index-ellipsis"
                   v-if="item.coupon_type === CouponType.TEveryFullReduction.value">
                每满{{item.full_amount}}减{{item.reduce_amount}}
              </div>
              <div class="activity-content-box-item-btn index-ellipsis">立即领取</div>
            </li>
          </ul>
        </div>
      </div>

      <!--视频带货-->
      <div class="video index-back block" v-if="specialVideoList && specialVideoList.length">
        <div class="video-con">
          <div class="video-con-header">视频带货</div>
          <swiper :options="swiperOptionVideo">
            <swiper-slide v-for="(item, index) in specialVideoList" :key="index" @click.native="onVideoList">
              <div class="video-con-box">
                <div class="video-con-box-item">
                  <video-playback class="video-con-box-item-left" :imageUrl="item.image_url"
                                  :videoUrl="item.video_url"></video-playback>
                  <div class="video-con-box-item-right">
                    <div class="video-con-box-item-right-title">{{item.title}}</div>
                    <div class="video-con-box-item-right-desc">
                      <i class="video-con-box-item-right-desc-icon"></i>
                      <div class="video-con-box-item-right-desc-text">热卖推荐</div>
                    </div>
                    <div class="video-con-box-item-right-goods">
                      <div class="video-con-box-item-right-goods-item"
                           v-for="(child, childIndex) in (item.topic_goods_list).slice(0, 2)" :key="childIndex">
                        <img class="video-con-box-item-right-goods-item-img"
                             :src="child.goods_image_main">
                        <div class="video-con-box-item-right-goods-item-price">￥{{child.internal_price}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>
      <!-- 专题精选 -->
      <MallChannel class="block" :items="channelList"></MallChannel>
      <!-- 楼层列表 -->
      <MallFloor :items="floorList"></MallFloor>
    </div>
  </div>
</template>
<script>
  import { globalData } from '../../config/globalData'
  import MallChannel from '@/components/mall/MallChannel'
  import MallFloor from '@/components/mall/MallFloor'
  import Mall from '@/dll/mall'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import 'swiper/dist/css/swiper.css'
  import VideoPlayback from '../../components/videoItem/videoPlayback'
  import Product from '@/dll/product'
  import ENUM from '../../config/enum'

  export default {
    name: 'index',
    components: {
      swiper,
      swiperSlide,
      MallChannel,
      MallFloor,
      VideoPlayback
    },
    data: () => {
      return {
        // banner列表
        bannerList: [],
        // banner自动轮播
        swiperOptionBanner: {
          spaceBetween: 12,
          autoplay: true,
          loop: true,
          centeredSlides: true,
          disableOnInteraction: false,
          pagination: {
            el: '#swiper-pagination-banner'
          }
        },
        //  分类列表
        categoryList: [],
        // 分类列表滑动
        swiperOptionClass: {
          slidesPerView: 1,
          spaceBetween: 0,
          pagination: {
            el: '#swiper-pagination-class'
          }
        },
        // 专题精选列表
        channelList: [],
        // 楼层列表
        floorList: [],

        // 视频带货自动轮播
        swiperOptionVideo: {
          spaceBetween: 1,
          autoplay: {
            delay: 10000 // 10秒切换一次
          },
          loop: true,
          centeredSlides: true,
          disableOnInteraction: false
        },

        // 公告滚动
        noticeTranslateY: 0,
        timerRoll: null,

        // 活动
        seckillList: [], // 秒杀
        seckillListStatus: {}, // 秒杀状态
        discountList: [], // 折扣
        couponList: [], // 优惠券
        groupList: [], // 拼团
        CouponType: ENUM.CouponType,

        // 视频带货
        specialVideoList: []
      }
    },

    watch: {
    },

    computed: {
    },

    created () {
      this.getIndex()
      this.getCategoryList()
    },

    mounted () {
    },

    methods: {
      // 首页banner 菜单
      async getIndex () {
        let res_index = await Mall.getIndex()
        if (res_index.code == 0) {
          this.bannerList = res_index.data.banner
          this.channelList = res_index.data.channel
          this.floorList = res_index.data.floor
        } else {
          this.$vux.alert.show({
            title: '提示',
            content: res_index.msg
          })
        }
      },
      // 获取分类列表
      async getCategoryList () {
        let res_category = await Mall.getCategoryList()
        if (res_category.code == 0) {
          let categoryList = []
          for (let i = 0; i < res_category.data.length; i++) {
            var key = Math.floor(i / 10)
            if (categoryList[key]) {
              categoryList[key].push(res_category.data[i])
            } else {
              categoryList[key] = [res_category.data[i]]
            }
          }
          this.categoryList = categoryList
        } else {
          this.$vux.alert.show({
            title: '提示',
            content: res_category.msg
          })
        }
      },
      // 搜索框点击跳转
      onSearchTap () {
        this.$router.push({ name: 'mallSearch', query: { from: 'index_search' } })
      },
      // banner 跳转
      onClickBanner (item) {
        this.$router.push({
          name: 'mallChannel',
          params: { topicId: item.topic_id },
          query: { item: JSON.stringify(item) }
        })
      },
      onDiscountTap (id) {
        this.$router.push({ name: 'mallDiscount', params: { id: id } })
      },
      onSeckillTap () {
        this.$router.push({ name: 'mallSeckill' })
      },
      onGroupTap () {
        this.$router.push({ name: 'mallGroup' })
      },
      onDistributionTap () {
        this.$router.push({ name: 'mallDistribution' })
      },
      onGetCouponTap () {
        this.$router.push({ name: 'mallGetcoupon' })
      },
      onMeTap () {
        if (globalData.access_token == 'default-access_token') {
          this.$router.replace({ name: 'login' })
        } else {
          this.$router.push({ name: 'me' })
        }
      },
      onCartTap () {
        if (globalData.access_token == 'default-access_token') {
          this.$router.replace({ name: 'login' })
        } else {
          this.$router.push({ name: 'shopping' })
        }
      },
      onClassTap () {
        this.$router.push({ name: 'mallClassify' })
      },

      // 获取频道精选
      async getChannelList () {
        let res = await Mall.getChannelList()
        if (res.code == 0) {
          this.specialList = res.data
        }
      },
      // 获取推荐列表
      async getRecommendlList () {
        let res = await Mall.getRecommendlList()
        if (res.code == 0) {
          this.recommendlList = res.data
        }
      },
      // 获取商城楼层列表
      async getFloorList () {
        let res = await Mall.getFloorList()
        if (res.code == 0) {
          this.floorList = res.data
        }
      },

      // 设置公告上下滚动
      setNoticeRoll () {
        this.timerRoll = setInterval(() => {
          this.$nextTick(function () {
            if (!this.$refs.noticeTitle) {
              return
            }
            let _offsetHeight = this.$refs.noticeTitle.offsetHeight // 滚动元素的高度
            this.noticeTranslateY -= 19
            if (this.noticeTranslateY <= -_offsetHeight) {
              this.noticeTranslateY = 0
            }
            this.$refs.noticeTitle.style.transform = `translateY(${this.noticeTranslateY}px)`
          })
        }, 10000)
      },

      // 获取分类
      async getClassify () {
        this.$vux.loading.show({
          text: '加载中'
        })
        let res = await Mall.getCateList()
        this.$vux.loading.hide()
        if (res.code == 0) {
          if (!res.data.length) return
          let classList = []
          let arr = []
          for (let i = 0; i < res.data.length; i++) {
            if (i % 10 == 0) {
              arr = []
            }
            arr.push(res.data[i])
            if (i % 10 == 0) {
              classList.push(arr)
            }
          }
          this.classList = classList
        }
      },

      // 跳转到分类页面
      onClickCategory (category) {
        this.$router.push({
          name: 'mallSearch',
          query: {
            category_id: category.category_id,
            from: 'index_category'
          }
        })
      },

      // 获取秒杀列表
      async getSeckillTime () {
        this.$vux.loading.show({
          text: '加载中'
        })
        let res = await Mall.getNewSeckill()
        this.$vux.loading.hide()
        if (res.code == 0) {
          if (!res.data.seckill_list.length) {
            this.seckillList = []
            return
          }

          for (let i = 0; i < res.data.seckill_list.length; i++) { // 判断是否有已经开始的场次
            if (res.data.seckill_list[i].seckill_status == 1) {
              this.seckillList = res.data.seckill_list[i].seckill_goods_list
              this.seckillListStatus = res.data.seckill_list[i]
              break
            } else if (res.data.seckill_list[i].seckill_status == 0) { // 判断是否有即将开始的场次
              this.seckillList = res.data.seckill_list[i].seckill_goods_list
              this.seckillListStatus = res.data.seckill_list[i]
              break
            }
          }

          // this.seckillList = res.data.seckill_list && res.data.seckill_list[0].seckill_goods_list
          // this.seckillListStatus = res.data.seckill_list && res.data.seckill_list[0].seckill_status
        }
      },

      // 获取折扣列表
      async getNewDiscountList () {
        this.$vux.loading.show({
          text: '加载中'
        })
        let res = await Product.getNewDiscountList()
        this.$vux.loading.hide()
        if (res.code == 0) {
          if (!res.data.discount_list.length) {
            this.discountList = []
            return
          }
          this.discountList = res.data.discount_list && res.data.discount_list[0].discount_goods_list
        }
      },

      // 优惠券列表
      async getCouponList () {
        this.$vux.loading.show({
          text: '加载中'
        })
        let res = await Mall.getNewcouponList()
        this.$vux.loading.hide()
        if (res.code == 0) {
          if (!res.data.coupon_list.length) {
            this.couponList = []
            return
          }
          this.couponList = res.data.coupon_list
        }
      },

      // 获取拼团商品列表
      async getGroupList () {
        this.$vux.loading.show({
          text: '加载中'
        })
        let res = await Mall.getNewGroup()
        this.$vux.loading.hide()
        if (res.code == 0) {
          let { data } = res
          if (!data.groupbuy_list.length) {
            this.groupList = []
          } else {
            this.groupList = res.data.groupbuy_list
          }
        }
      },

      // 进入视屏带货列表
      onVideoList () {
        this.$router.push({ name: 'video' })
      },

      // 获取视频带货列表
      async getSpecialVideoList () {
        this.$vux.loading.show({
          text: '加载中'
        })
        let res = await Mall.getTopicVideoList()
        this.$vux.loading.hide()
        if (res.code == 0) {
          this.specialVideoList = res.data.topic_list
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  .block {
    padding: 0 10px;
  }

  .page {
    /*padding-top: 45px;*/
    padding-bottom: 25px;
  }

  .pagetop {
    display: block;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
  }

  .user_icon {
    width: 20px;
    height: 20px;
    padding-left: 12px;
    padding-right: 12px;
    display: block;
  }

  .topbar {
    box-sizing: border-box;
    background-color: #fff;
    padding-top: 6px;
    padding-bottom: 10px;
  }

  .topbar .icon {
    width: 25px;
    padding: 0 3px;
    display: block;
  }

  .topbar .inputbox {
    background: #fbf8f7;
    height: 30px;
    border-radius: 15px;
  }

  .iconbox {
    /*background-color: #fff;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px;
    box-sizing: border-box;
  }

  .iconbox .icon {
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 28px;
    background-color: #f5f5f5;
  }

  .iconbox .text {
    line-height: 20px;
    font-size: 14px;
    color: #351009;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pendbox .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .pendbox .header .title {
    font-size: 15px;
    color: #351009;
    line-height: 24px;
  }

  .pendbox .header .subtitle {
    font-size: 12px;
    color: #848484;
  }

  .pendbox .header .more {
    color: #a8a8a8;
    font-size: 12px;
  }

  .recommendbox .item {
    background-color: #fff;
    padding: 12px;
    box-sizing: border-box;
  }

  .recommendbox .item image {
    display: block;
    height: 330px;
    width: 100%;
    background-color: #f5f5f5;
  }

  .recommendbox .item .title {
    font-size: 12px;
    line-height: 17px;
    margin-top: 20px;
    color: #737373;
    font-weight: 600;
  }

  .recommendbox .item .desc {
    font-size: 10px;
    line-height: 15px;
    color: #737373;
  }

  .recommendbox .item .qt {
    display: flex;
    margin-top: 12px;
    color: #575757;
    font-size: 10px;
    line-height: 20px;
  }

  .recommendbox .item .qt .price {
    font-size: 14px;
  }

  .recommendbox .item .bag {
    padding-left: 6px;
    padding-right: 6px;
    margin-left: 24px;
    font-size: 10px;
    height: 12px;
    line-height: 14px;
  }

  .recommendbox .item .bag-ticket {
    background-color: #ff230c;
    color: #fff;
  }

  .recommendbox .item .bag-active {
    background-color: #920882;
    color: #fff;
  }

  .recommendbox .item + .item {
    margin-top: 12px;
  }

  .price {
    color: #fd0002;
  }

  .d-price {
    color: #8a8687;
    text-decoration: line-through;
  }

  .subjectbox {
    padding: 12px;
    background-color: #fff;
  }

  .subjectbox .item {
    background-color: #fe0000;
    border-radius: 10px;
  }

  .subjectbox .item .image {
    display: block;
    border-radius: 10px;
    height: 127px;
    width: 100%;
    background-color: #f5f5f5;
  }

  .subjectbox .item .titlebar {
    box-sizing: border-box;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 12px;
    display: flex;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    align-items: center;
  }

  .subjectbox .item .title {
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .subjectbox .item .icon {
    height: 15px;
    width: 15px;
    border-radius: 8px;
    background-color: #fff;
  }

  .subjectbox .item .desc {
    margin-top: 5px;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 12px;
    font-size: 12px;
    color: #fff;
    line-height: 17px;
  }

  .streamer {
    /*height: 163px;*/
    width: 100%;
    display: block;
    background-color: #fff;
  }

  .commoditybox {
    background-color: #fff;
  }

  .commoditybox-no {
    background-color: transparent;
  }

  .commoditybox-no .item {
    padding: 12px;
  }

  .commoditybox .streamer {
    margin-top: 12px;
    margin-bottom: 12px;
  }

  .commoditybox .item {
    display: block;
    background-color: #ffffff;
  }

  .commoditybox .item .imgge {
    height: 158px;
    width: 100%;
    display: block;
  }

  .commoditybox .item .title {
    margin-top: 12px;
    font-size: 14px;
    line-height: 20px;
    color: #5f5d5e;
  }

  .commoditybox .item .bagbar {
    display: flex;
    margin-left: -10px;
    margin-top: 8px;
  }

  .commoditybox .item .bagbar .bag {
    padding-left: 6px;
    padding-right: 6px;
    font-size: 10px;
    height: 14px;
    line-height: 14px;
    display: block;
    margin-left: 12px;
    border: 1px solid transparent;
  }

  .commoditybox .item .bagbar .bag-ticket {
    border-color: #fd0002;
  }

  .commoditybox .item .bagbar .bag-active {
    border-color: #920882;
  }

  .commoditybox .item .pricebar {
    margin-top: 8px;
    display: flex;
  }

  .commoditybox .item .pricebar .price {
    font-size: 14px;
    line-height: 20px;
    color: #fe0000;
    flex: 1;
  }

  .commoditybox .item .pricebar .icon {
    height: 15px;
    width: 15px;
    display: block;
    border-radius: 8px;
    margin-left: 12px;
  }

  /* 改变导航栏的排列方式 */

  .grid {
    transition: all .5s;
    flex-wrap: nowrap;
    /*overflow: scroll;*/
    /*-webkit-overflow-scrolling: touch;*/
  }

  /*移动端显示滚动条*/

  .grid::-webkit-scrollbar {
    -webkit-appearance: none;
  }

  .grid::-webkit-scrollbar:vertical {
    width: 1px;
  }

  .grid::-webkit-scrollbar:horizontal {
    height: 1px;
  }

  .grid::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 10px;
    border: 1px solid #ffffff;
  }

  .grid::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: transparent;
  }

  .grid::-webkit-scrollbar-corner {
    background-color: transparent;
  }

  /*banner*/
  .swiper-container-banner /deep/ img {
    height: 140px;
    width: 100%;
    border-radius: 8px;
  }

  .swiper-container-banner {
    position: relative;
  }

  /*购物车数量*/
  .tabbar-item {
    position: relative;

    .goodsNum {
      position: absolute;
      right: 32px;
    }
  }

  /*视频带货*/
  .video {

    * {
      box-sizing: border-box;
    }

    .video-con {
      background: #fff;
      padding: 10px 0;

      .video-con-header {
        font-size: 15px;
        color: #351009;
        line-height: 24px;
        margin-bottom: 12px;
        font-weight: 600;
      }

      .video-con-box {
        .video-con-box-item {
          display: flex;

          .video-con-box-item-right {
            background: rgba(251, 247, 247, 1);
            flex-shrink: 0;
            max-width: 120px;

            .video-con-box-item-right-title {
              font-size: 12px;
              color: rgba(51, 51, 51, 1);
              margin: 10px 10px 14px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
            }

            .video-con-box-item-right-desc {
              display: flex;
              align-items: baseline;
              padding: 0 7px 4px;

              .video-con-box-item-right-desc-icon {
                width: 11px;
                height: 13px;
                background: url("../../assets/img/icon_fire.png") no-repeat center;
                background-size: cover;
                margin-right: 5px;
              }

              .video-con-box-item-right-desc-text {
                color: #2195F3;
                font-size: 9px;
              }
            }

            .video-con-box-item-right-goods {
              padding: 2px;
              display: flex;

              .video-con-box-item-right-goods-item {
                position: relative;
                font-size: 0;
                width: 57px;
                height: 57px;
                margin-right: 2px;
                border-radius: 10px;

                &:nth-child(2n) {
                  margin: 0;
                }

                .video-con-box-item-right-goods-item-img {
                  width: 100%;
                  height: 100%;
                }

                .video-con-box-item-right-goods-item-price {
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  top: 0;
                  left: 0;
                  font-size: 9px;
                  color: #fff;
                  background: url("../../assets/img/icon_goods_back.png") no-repeat center;
                  background-size: cover;
                  display: flex;
                  align-items: flex-end;
                  justify-content: center;
                  padding-bottom: 6px;
                }
              }
            }
          }
        }
      }
    }
  }

  /*公告*/
  .notice-box {
    padding: 12px 10px;
    margin-top: 1px;
  }

  .notice {
    display: flex;
    height: 19px;
    overflow: hidden;
    align-items: flex-start;

    .notice-icon {
      flex-shrink: 0;
      width: 19px;
    }

    .notice-title {
      flex: 1;
      color: #4E4E4E;
      font-size: 14px;
      margin-left: 4px;
      overflow: hidden;
      transition: all 0.5s;

      .notice-title-item {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        height: 19px;
        line-height: 19px;
      }
    }
  }

  /*新首页改动*/
  .index-margin-bto {
    margin-bottom: 5px;
  }

  .index-pad-bto {
    padding-bottom: 10px;
  }

  .index-back {
    background: #fff;
  }

  .index-ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }

  .block + .block {
    margin-top: 5px;
  }

  /*搜索*/
  .index-search {
    span {
      font-size: 12px;
      color: #b2b2b2;
      text-align: center;
      line-height: 30px;
      height: 30px;
    }

    .inputbox {
      justify-content: center;
      align-items: center;
    }
  }

  /*banner*/
  .swiper-block {
    font-size: 0;
  }

  /*分类*/
  .swiper-block-class {
    padding: 10px 0;

    .swiper-block-class-item-con {
      display: flex;
      flex-wrap: wrap;

      .swiper-block-class-item-con-list {
        flex-shrink: 0;
        width: 20%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-bottom: 10px;

        .swiper-block-class-item-con-list-img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          // background: #9A9A9A;
        }

        .swiper-block-class-item-con-list-text {
          color: #333;
          font-size: 12px;
          margin-top: 5px;
          height: 16px;
          overflow: hidden;
          text-align: center;
          padding: 0 5px;
        }
      }
    }

    #swiper-pagination-class {
      margin-bottom: 8px;
    }
  }

  /*活动*/
  .activity {
    padding: 10px;
    display: flex;

    .activity-content {
      flex-shrink: 0;
      width: 50%;

      .activity-content-head {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        .activity-content-head-title {
          font-size: 14px;
          color: #000;
          font-weight: 600;
          flex-shrink: 0;
        }

        .activity-content-head-desc {
          color: #323232;
          font-size: 10px;
          font-weight: 400;
          margin-left: 1%;
          flex-shrink: 0;

          .activity-content-head-desc-tim-num {
            background: rgba(231, 24, 24, 1);
            padding: 1px 1px;
            color: #fff;
            border-radius: 2.5px;
          }
        }
      }

      .activity-content-box {
        display: flex;
        overflow: hidden;
        position: relative;

        .activity-content-box-item {
          flex-shrink: 0;
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;

          img {
            border-radius: 2.5px;
          }
        }
      }

      .activity-content-border:after {
        height: 74px;
        content: ' ';
        width: 1px;
        background: rgba(0, 0, 0, 0.11);
        position: absolute;
        right: 3%;
        top: 50%;
        transform: translateY(-50%);
      }

      .activity-content-mini {
        .activity-content-box-item {
          width: 28.148%;
          margin-right: 3.11%;

          &:last-child {
            margin-right: 0;
          }

          .activity-content-box-item-img {
            width: 100%;
            height: 50px;
            max-height: 50px;
          }

          .activity-content-box-item-price {
            font-size: 11px;
            color: #FE0000;
            margin: 2px 0;
          }

          .activity-content-box-item-old {
            font-size: 9px;
            color: #808080;
            text-decoration: line-through;
          }
        }
      }

      .activity-content-big {
        .activity-content-box-item {
          width: 44%;
          margin-right: 9%;
          height: 90px;
          position: relative;
          background: #ffeadf;
          padding: 0 4px;
          text-align: center;
          overflow: hidden;
          border-radius: 5px;

          .activity-content-box-item-ti {
            position: absolute;
            top: 0;
            left: 0;
            color: #fff;
            background: radial-gradient(circle, rgba(255, 105, 13, 1) 0%, rgba(255, 141, 32, 1) 100%);
            border-radius: 2.5px 0 2.5px 0;
            font-size: 9px;
            padding: 1px 4px;
            max-width: 70%;
          }

          .activity-content-box-item-num {
            color: rgba(33, 33, 33, 1);
            font-weight: bold;
            font-size: 16px;
            margin-top: 10px;
          }

          .activity-content-box-item-desc {
            font-size: 9px;
            color: #212121FF;
            padding-bottom: 10px;
            margin-bottom: 7px;
            border-bottom: 1px dashed rgba(244, 204, 179, 1);
            width: 100%;

            &:before {
              width: 5px;
              height: 5px;
              background: #fff;
              display: block;
              content: ' ';
              border-radius: 50%;
              position: absolute;
              bottom: 28px;
              left: 0;
              transform: translateX(-50%);
            }

            &:after {
              width: 5px;
              height: 5px;
              background: #fff;
              display: block;
              content: ' ';
              border-radius: 50%;
              position: absolute;
              bottom: 28px;
              right: 0;
              transform: translateX(50%);
            }
          }

          .activity-content-box-item-btn {
            background: #ff7010;
            font-size: 9px;
            border-radius: 10px;
            padding: 2px 4px;
            color: #fff;
          }
        }
      }
    }
  }
</style>
